<template>
  <div class="container">
    <div class="forget-div">
      <div class="step-div">
        <el-steps :active="active=1" finish-status="success">
          <el-step title="账户确认">
          </el-step>
          <el-step title="重置密码"></el-step>
          <el-step title="重置成功"></el-step>
        </el-steps>
      </div>
      <div class="form-div">
        <el-form
            ref="reset"
            :model="reset"
            :rules="rules"
            label-width="120px">
          <el-form-item label="新密码" prop="password">
            <el-input
                v-model="reset.password"
                type="password"
                placeholder="请输入新密码">
            </el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword" >
            <el-input
                v-model="reset.confirmPassword"
                type="password"
                placeholder="确认密码">
            </el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <span>{{showEmail}}</span>
          </el-form-item>
          <el-form-item label="验证" prop="authCode" id="verify-input">
            <el-input id="auth-input"
                      v-model="reset.authCode"
                      placeholder="请输入验证码">
            </el-input>
            <div class="auth-btn">
              <el-button
                  class="auth-button"
                  @click="sendAuthCode"
                  v-show="!showTime">
                验证码
              </el-button>
              <el-button class="auth-button" v-show="showTime" disabled>
                {{ countdown }}
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="next-btn">
        <el-button id="update-btn" @click="next" type="primary">确认修改</el-button>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>


<script>

import Common from "@/api/common";

export default {
  data() {
    const validateCheckPass = (rule,value,callback) => {
      if (value === "") {
        callback(new Error("请输入确认密码"));
      } else if (value !== this.reset.password) {
        callback(new Error("两次输入密码不一致！"));
      } else {
        callback();
      }
    };
    const validPassword=(rule,value,callback)=>{
      let reg= /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
      if(!reg.test(value)){callback(new Error('密码必须是由8-20位字母+数字组合'))
      }else{
        callback()
      }
    }
    return {
      active: 0,
      email: null,
      reset: {
        password: null,
        confirmPassword: null,
        authCode: null
      },
      code: null,
      newPassword: null,
      showEmail: null,
      /* 布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
      showTime: false,
      disableCodeBtn: false,
      // 倒计时，1分钟内只能发送一次邮件
      countdown: 60,
      timer: null,

      // 格式校验
      rules: {
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {validator: validPassword, trigger: "blur"}
        ],
        confirmPassword: [
          {required: true, message: "请输入确认密码", trigger: "blur"},
          {validator: validateCheckPass, trigger: "blur"}
        ],
        authCode: [
          {required: true, message: "请输入验证码", trigger: "blur"}
        ]
      }
    }
  },
  created() {
    // 如果路由中有参数值则执行此方法
    if(this.$route.params && this.$route.params.email) {
      // 从路由中获取值
      this.email = this.$route.params.email
      this.showEmail = this.processEmail(this.email)
    } else {
      // 路由中没有携带参数，自动跳转到 忘记密码 第一个页面
      this.$router.push({path: '/forget'})
    }
  },
  methods: {
    init() {

    },
    next() {
      Common.forgetPassword(this.email, this.reset.password, this.reset.authCode).then(response => {
        // 重置成功则跳转页面
        this.$router.push({path: '/forget/success'})
        return response
      }).catch(response => {
        this.$message({
          type: 'error',
          message: response.message
        })
      })
    },
    // 邮箱安全显示
    processEmail(email) {
      let chars = email.split("")
      for (let i = 0; i < chars.length; i++) {
        if (chars[i] === '@') {
          if (i > 8) {
            chars[i - 3] = 'X'
            chars[i - 4] = 'X'
          }
          if (i > 5) {
            chars[i - 1] = 'X'
            chars[i - 2] = 'X'
          }
        }
      }
      return chars.join("");
    },
    sendForgetPasswordCode() {
      Common.sendForgetPasswordCode.then(response => {
        this.$message({
          type: 'info',
          message: '验证码已经发送至您的邮箱'
        })
        return response
      }).catch((response) => {
        this.$message({
          type: 'warning',
          message: response.message
        })
      })
    },
    forgetPassword() {
      Common.forgetPassword(this.email, this.code, this.newPassword).then(response => {

      }).catch(response => {
        this.$message({
          type: "error",
          message: response.message
        })
      })
    },
    // 发送 忘记密码 验证码
    sendAuthCode() {
      if (this.email == null) {
        this.$message({
          type: 'warning',
          message: '请输入邮箱！'
        })
        return;
      }
      // 固定倒计时时间，60秒
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.countdown = TIME_COUNT
        this.showTime = TIME_COUNT;
        this.showTime = true;
        this.timer = setInterval(() => {
          if (this.countdown > 0 && this.countdown <= TIME_COUNT) {
            this.countdown--;
            sessionStorage.setItem("countdownTime", this.countdown);
          } else {
            this.showTime = false;
            // 清除定时器
            clearInterval(this.timer);
            this.timer = null;
            sessionStorage.setItem("countdownTime", null);
          }
        }, 1000)
      }

      Common.sendForgetPasswordCode(this.email).then((response) => {
        this.$message({
          type: 'success',
          message: '验证码已发送至您的邮箱！'
        })
        return response;
      }).catch(response => {
        this.$message({
          type: 'success',
          message: response.message
        })
      })

    }
  }
}
</script>


<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(../../../assets/img/login-bg.png);
  background-size: 100%;
}
.forget-div {
  position: absolute;
  left: 27%;
  top: 15%;
  width: 730px;
  height: 530px;
  border-radius: 28px;
  box-shadow:4px 4px 15px #6d6a6a;
  background: rgba(250, 250, 250, 0.97);
}
.step-div {
  width: 440px;
  position: absolute;
  top: 8%;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.form-div {
  position: absolute;
  top: 47%;
  left: 46%;
  transform: translate(-50%,-50%);
}
.next-btn {
  position: absolute;
  top: 78%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.next-btn .el-button {
  width: 200px;
}
#verify-input {
  display: flex;
}

#verify-input .el-input{
  width: 240px;
}
.el-input {
  width: 360px;
}
.auth-btn {
  display: inline;
  position: absolute;
  right: 0;
}

.auth-button {
  width: 100px;
}
</style>